<template>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
        <el-form-item label="用户ID">
            <el-input v-model="queryInfo.id" placeholder="请输入用户ID" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
    </el-form>
    <!-- 数据显示 -->
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="用户ID"></el-table-column>
        <el-table-column prop="mark_text" label="评论内容"></el-table-column>
        <el-table-column prop="mark_star" label="星级评分"></el-table-column>
        <el-table-column prop="create_time" label="评价时间"></el-table-column>
        <!-- <el-table-column prop="consult_id" label="关联咨询师表id"></el-table-column> -->
        <!-- <el-table-column prop="user_id" label="关联用户表id"></el-table-column>
        <el-table-column prop="app_id" label="关联预约表id"></el-table-column> -->
        <el-table-column fixed="right" label="操作" min-width="100">
            <template #default="scope">
                <el-button link type="primary" @click="onDel(scope.row.id)" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        style="margin-top: 20px;"
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[2, 5, 10, 20]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const tableData = ref([]);
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    id: null,
    mark_text: '',
    mark_star: null,
    create_time: null,
    consult_id: null,
    user_id: null,
    app_id: null,
});
const total = ref(0);

// 分页相关样式配置
const size = ref('');
const disabled = ref(false);
const background = ref(true);

onMounted(() => {
    getList();
});

const getList = () => {
    axios.get('/userMark/findAll', {
        params: {
            ...queryInfo.value
        }
    }).then((resp) => {
        let result = resp.data;
        if (result.code === 1) {
            total.value = result.data.total;
            tableData.value = result.data.list; 
        }
    }).catch((error) => {
        console.error('请求出错:', error);
        ElMessage.error('获取咨询回复列表失败');
    });
};

const onSubmit = () => {
    // 搜索时重置页码为 1
    queryInfo.value.pageNum = 1;
    getList();
};

// 删除
const onDel = (id) => {
    axios.delete(`/userMark/${id}`).then((resp) => {
        let result = resp.data;
        if (result.code === 1) {
            getList();
            ElMessage.success('删除成功'); 
        } else {
            ElMessage.error('删除失败');
        }
    }).catch((error) => {
        console.error('请求出错:', error);
    });
};

const handleSizeChange = (newSize) => {
    queryInfo.value.pageSize = newSize;
    // 更改每页数量时重置页码为 1
    queryInfo.value.pageNum = 1;
    getList();
};

const handleCurrentChange = (newPage) => {
    queryInfo.value.pageNum = newPage;
    getList();
};
</script>

<style scoped>

</style>